<template>
  <div class="home" >
    <div class="NAV" >
      <table class="table">
        <tr>
          <th>注册人数</th>
          <th>投资总额</th>
          <th>借款总额</th>
          <th>累计收益</th>
        </tr>
        <tr class="tr1">
          <th>{{getList.num1*1000}}</th>
          <th>
            {{'￥' + getList.num2*100 }}
            <span style="font-size: 22px;color: red">万</span>
          </th>
          <th>
            {{'￥' +getList.num3*100}}
            <span style="font-size: 22px;color: red">万</span>
          </th>
          <th>
            {{'￥' +getList.num4*100}}
            <span style="font-size: 22px;color: red">万</span>
          </th>
        </tr>
      </table>
    </div>

    <div class="form" >
      <p class="title">代办事项</p>
      <table class="table" >
        <tr >
          <th>新标待审</th>
          <th>新标待上架</th>
          <th>满标复审</th>
          <th>待还款</th>
          <th>待审核</th>
          <th>提现待处理</th>
        </tr>
        <tr class="tr2">
          <th>{{getList.num2}}</th>
          <th>{{getList.num1}}</th>
          <th>{{getList.num4}}</th>
          <th>{{getList.num5}}</th>
          <th>{{getList.num3}}</th>
          <th>{{getList.num3 - 5}}</th>

        </tr>
      </table>
    </div>

    <div class="data" >
      <home1 :searchList="getList1"></home1>
    </div>
  </div>
</template>

<script>
import caishen from "../../assets/image/caishen.png";
import home1 from "../../components/repayment/home1";
import  {getBannerList} from "../../http/repayment.js";

export default {
  name: "home",
  components: {
    home1
  },
  data: function () {
    return {
      title: "",
      testMenuListData: {
        baseRoute:"/",
        menuList: [
          {
            title: "首页",
            icon: caishen,
            items: [
              {
                route: "",
                text: "首页",
                default: true
              }
            ]
          },
        ]
      },
      getList:{
        num1:null,
        num2:null,
        num3:null,
        num4:null,
        num5:null
      },
      getList1:{},
      searchList: {
        rotation:{
          inUse: '',
          desc: '',
          name:'',
        },
        page:1,
        size:5
      },
    }
  },
  created() {
    getBannerList(this.searchList)
        .then(res => {
          console.log('前端请求返回参数',res);
          let temp = {};
          temp.num1 = res.data.data.result.rotations[0].id;
          temp.num2 = res.data.data.result.rotations[1].id;
          temp.num3 = res.data.data.result.rotations[2].id;
          temp.num4 = res.data.data.result.rotations[3].id;
          temp.num5 = res.data.data.result.count;
          this.getList = temp;
          this.getList1 = temp;
          for(let i in this.getList1){
            this.getList1[i] +=3;
          }
        })
        .catch(err => {
          console.log('请求失败', err);
        })

  }
}
</script>

<style scoped>


.title{
  background:#d3dce6;
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
  padding-left:  20px;
}
.form{
  height: 100px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto ;
}

.table{
  width: 100%;
  align-content: center;
  height: 100%;
  background: #f1f0f0;
}
.tr1 th{
  color: red;
  font-size: 23px;
}
.tr2 th{
  color: red;
  font-size: 20px;
}
th{
  width: 16.5%;
}
.data{

  /*width: 100%;*/
  width: 80%;
  margin: 0 auto ;
  padding-top: 80px;
}
.home{
  background: white ;
  height: 100%;
  width: 100%;
}

.NAV{
  height: 80px;
  margin:0 auto;
  width: 80%;
  padding-top: 20px ;
}

</style>